<template>
  <div class="comment-form">
    <h3>发表评论</h3>
    <div class="editor-container">
      <div class="editor-wrapper">
        <!-- 替换 textarea 为编辑器容器 -->
        <div id="parent-editor"></div>
      </div>
    </div>
    <button class="submit-btn" @click="submitComment">
      {{ isLoading ? '提交中...' : '提交评论' }}
    </button>
    <!-- 提示信息显示区域 -->
    <span class="status-message" v-if="statusMessage">
      {{ statusMessage }}
    </span>
  </div>
</template>


<script setup>
import E from 'wangeditor';
// 注入refreshComments方法
const refreshComments = inject('refreshComments')
const editor = shallowRef(null)

const content = ref('')
const parentId = ref(null)

const articleId = parseInt(useRoute().params.id)

const errorMessage = ref('')
const statusMessage = ref('') // 用于显示提示信息
let statusTimeout = null // 定义定时器，用于自动清除提示

const isLoading = ref(false)

const emit = defineEmits(['comment-added'])

const submitComment = async () => {
  if (!content.value.trim()) {
    alert('评论内容不能为空')
    return
  }
  try {
    const payload = {
      article: articleId,
      content: content.value,
      parent: parentId.value || null
    }
    isLoading.value = true
    statusMessage.value = '正在提交评论...'
    const response = await axios.post('/api/comments/comments/', payload,{ requiresAuth: true })
    await refreshComments()
    emit('comment-added', response.data) // 触发更新事件
    content.value = '' // 清空输入框
    editor.value.txt.clear() // 清空编辑器内容
    errorMessage.value = ''
    statusMessage.value = '评论成功！！'
  } catch (error) {
    errorMessage.value = error.response?.data?.detail || '评论失败，请稍后重试'
     statusMessage.value = errorMessage.value // 提交失败提示
  } finally {
  isLoading.value = false
    // 设置自动清除提示信息（3秒后清空提示）
    if (statusTimeout) clearTimeout(statusTimeout)
    statusTimeout = setTimeout(() => {
      statusMessage.value = ''
    }, 3000)
  }
}

onMounted(() => {
  // 初始化编辑器
  editor.value = new E('#parent-editor')

  // 使用正确的配置方式（不要覆盖整个 config 对象）
  editor.value.config.height = 160
  editor.value.config.placeholder = '请输入评论内容...'
  editor.value.config.onchangeTimeout = 1000

  // 修正菜单配置（使用完整菜单名）
  editor.value.config.menus = [
    'bold',
    'italic',
    'underline',
    'link',
    'code',
    'list', // 需要指定是有序列表还是无序列
      'emoticon'
  ]

  // 更可靠的 onchange 处理
  editor.value.config.onchange = (html) => {
    content.value = html
  }

  editor.value.create()
})
onBeforeUnmount(() => {
  // 销毁编辑器实例
  if (editor.value) {
    editor.value.destroy()
    editor.value = null
  }
})
</script>


<style scoped>
.comment-form {
  padding: 10px;
  background-color: var(--card-bg-color,#fff);
  border-radius: 5px;
  margin:0 auto 20px auto;
}
h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--article-detail-text-color,#333);
}

.editor-container {
  border: 1px solid var(--article-comment-editor-color,#e0e0e0);
  border-radius: 5px;
  height: auto;
  z-index: 996;
  position: relative;
}
/* 优化编辑器样式 */
#parent-editor {
  min-height: 160px;
  background-color: var(--card-bg-color,#fff);
}

/* 覆盖默认工具栏样式 */
#parent-editor .w-e-toolbar {
  background-color: var(--card-bg-color,#f8f9fa);
  border-bottom: 1px solid var(--article-comment-border-color,#e9ecef);
  padding: 5px;
}

#parent-editor .w-e-text-container {
  background-color: var(--card-bg-color,#fff);
  min-height: 120px;
}

.submit-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 20px;
  background-color: var(--article-comment-submit-color,#007bff);
  color: var(--article-comment-submit-text-color,#fff);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #0056b3;
}
.status-message {
  margin-top: 10px;
  color: #007bff;
  font-size: 14px;
  text-align: center;
  animation: fadeInOut 3s ease-out;
}

/* 提示信息淡入淡出效果 */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
